<template>
    <div class="multi-row">
        <button class="add_text" @click="addText">增加</button>
        <div class="headline">
            <div class="text_line" v-for="(item,index) in caption" :key="index">
                <p class="item_line">标题{{index+1}}</p>
                <i class="el-icon-close" style="position: absolute; top: 8px; right: 8px; cursor: pointer;" @click="closeFn(index)"></i>
                <el-form-item label="标题" label-width="70px">
                    <el-input v-model="item.contentTitle" maxlength="10" show-word-limit></el-input>
                </el-form-item>
            </div>
        </div>
    </div>
</template>

<script>
/**
* description: 多行标题模块
*/
export default {
    data() {
        return {
           caption:[]
        }
    },
    methods:{
        addText() {
           this.caption.push({
                contentTitle: '请输入'    
           })
        },
        closeFn() {
            this.caption.pop()
        },
        submit() {
            return { formData:this.caption } 
        }
    }
}
</script>

<style lang="scss" scoped>
    .multi-row{
        padding-bottom: 100px;
    }
    .add_text{
        position: absolute;
        right: 510px;
        top: 177px;
        width: 60px;
        height: 32px;
        border-radius: 3px;
        border: 1px solid #00B3A8;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #00B3A8;
        line-height: 19px;
        background-color: #fff;
    }
    .item_line{
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #999999;
        line-height: 16px;
        margin: 10px 0 22px 71px;
    }
    .text_line{
        position: relative;
        margin: 0  0 10px 28px;
        background: #FFFFFF;
        border: 1px dashed #CBCED4;
    }
    .headline{
        width: 700px;
    }
</style>